import React from "react"
import { Navigator, Text, View } from "@tarojs/components"
import clsx from "clsx"
import GpDot from "@/components/GpDot"
import { NavigatorProps } from "@tarojs/components/types/Navigator"

type IProps = {
  className?: string
  text: string
  /** 跳转链接，此时会渲染`Navigator`而不是`View` */
  navigationLink?: string
  /** 右侧显示的时间 */
  time?: string
}
/** 类新闻列表项目 */
const GpNewsItem: React.FC<IProps> = (props: IProps) => {
  const { className, text, navigationLink, time = "23:00" } = props
  const Comp = navigationLink ? Navigator : View
  const compProps = {} as NavigatorProps
  if (navigationLink) {
    compProps.url = navigationLink
    compProps.hoverClass = "none"
  }
  return (
    <Comp {...compProps}>
      <View className={clsx("flex flex-row items-center", className)}>
        <GpDot color="#AEAFC0" size={8} />
        <Text className="flex-1 yahei font-normal text-28px text-hex-2c2c35 truncate whitespace-nowrap ml-8px">
          {text}
        </Text>
        {time && (
          <View className="ml-45px yahei font-normal text-24px text-hex-b8b8bf flex-none justify-self-end">
            {time}
          </View>
        )}
      </View>
    </Comp>
  )
}
export default GpNewsItem
